<template>
  <div class="dashboard-container">
    <el-row class="list-menu">
      <el-button type="primary" @click="dialogVisible=true">新增</el-button>
    </el-row>

    <el-dialog
      title="管家入驻"
      :visible.sync="dialogVisible"
      width="40%"
      >
      <div class="house-rz">
        <div class="code-box">
          <div>【第一步关注公众号】</div>
          <img class="code" src="@/assets/wxgzh.png" alt="">
        </div>
        <div class="code-box">
          <div>【第二步填写基本信息】</div>
          <img class="code" src="@/assets/xcx_rz.png" alt="">
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>




    <el-card v-loading="fullscreenLoading">
      <el-table :data="data" border style="width: 100%">
        <el-table-column prop="avatarUrl" label="头像" width="60">
          <template slot-scope="scope">
            <el-image :src="scope.row.avatarUrl" v-if="scope.row.avatarUrl"></el-image>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" width="180">
          <template slot-scope="scope">
            {{ scope.row.nickName || '无' }}
          </template>
        </el-table-column>

        <el-table-column prop="title" label="负责区域" width="180">

        </el-table-column>
        <el-table-column prop="phone" label="管家手机号" width="180">
          <template slot-scope="scope">
            {{ scope.row.phone || '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="180">
          <template slot-scope="scope">
            {{ scope.row.status == 'true' ? '正常' : '冻结' }}
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="modifyCamp(scope.row)">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request';
export default {
  data() {
    return {
      fullscreenLoading: false,
      data: [],
      queryString: '',
      dialogVisible: false,
    }
  },
  mounted() {
    request.get('/housekeep-list', {
      params: {
        name: this.queryString || '',
      },
    }).then((res) => {
      this.data = res.data;
    })
  },
  methods: {
    modifyCamp() {},
  },
}
</script>

<style lang="scss" scoped>
.house-rz{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.code-box{
  margin: 0 30px;
}
.code{
  width: 200px;
  margin-top: 20px;
}
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.list-menu {
  margin-bottom: 20px;
}
</style>